<!DOCTYPE html>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<html>
<head>
<title>${fns:getConfig('productName')}</title>
<script src="${ctxStatic}/jqGrid5/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctx}/js/login.js" charset="utf-8" ></script>
<link type="text/css" rel="stylesheet" href="${ctx}/styles/css/login.css">
<script type="text/javascript" src="${ctxStatic}/CryptoJS/components/core-min.js" charset="utf-8" ></script>
<script type="text/javascript" src="${ctxStatic}/CryptoJS/rollups/sha256.js" charset="utf-8" ></script>
<link rel="shortcut icon" href="${ctx}/images/logo.ico" type="image/x-icon" />
<script type="text/javascript">
function saveUsername(theForm) {
	var action = "${ctx}/loginCheck"
	var u = $("#j_username").val();
	var p = $("#j_password").val();
	p = CryptoJS.SHA256(p+"{"+u+"}");
	theForm.action = action + "?username=" + u + "&encryptionStr=" + p;
}
function flashCaptcha() {
	$("#captchaImg").attr("src","${ctx}/security/jcaptcha.jpg?d=" + new Date().getTime());
}
</script>
</head>
<body style="overflow:hidden">
    <div class="pagewrap">
        <div class="main">
            <div class="header"></div>
            <div class="content">
            <div class="con_left"></div>
                <div class="con_right">
                    <div class="con_r_top">
                    	<!-- <a href="javascript:;" class="left" style="color: rgb(153, 153, 153); border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgb(222, 222, 222);">关注我们</a> -->
                        <a href="javascript:;" class="right" style="color: #555; border-bottom:1px solid #E4E4E4;">登录</a>
                   </div>
                    <ul>
                        <li class="con_r_left" style="display: none;">
                            <div class="erweima">
                                <div class="qrcode">
                                    <div id="output" style="width: 100%; position: relative">
                                        <img src="images/login/2weima.jpg" style="width: 174px; height: 174px"></div>                                    
                                </div>
                             </div>
                            <div style="height: 70px">
                                <p>微信扫码 安全便捷</p>
                            </div>
                        </li>
                        <li class="con_r_right" style="display: block;">
                        	<div style="width:237px;margin-left:44px;color:red;height:auto;line-height:17px;font-size:12px; align="center"> 
                        	<c:if test="${!empty param.error}">
											<c:if test="${param.error == '1'}">
												
													<c:choose>
														<c:when test="${failureCount==0}">
													    	密码错误次数过多，账号现已被锁定，请联系管理员
														</c:when>
														<c:when test="${not empty failureCount}">
													    	用户名或密码错误,再连续输错${failureCount}次，账号将被锁定
														</c:when>
														<c:otherwise>
													    	用户名或密码错误，请重新尝试
														</c:otherwise>
													</c:choose>
												
											</c:if>
											<c:if test="${param.error == '2'}">
												长时间未使用，请重新登录！
											</c:if>
											<c:if test="${param.error == '3'}">
												账号在其他地方登录！
											</c:if>
											<c:if test="${param.error == '4'}">
												验证码错误！
											</c:if>
										</c:if>
									</div>
                           <form  method="post" onsubmit="saveUsername(this);" autocomplete="off" id="loginForm" name="loginForm">
			                 <div class="user">
			                        <div class="c_ cc_">
			                        	<span class="user-icon"></span>
										<input class="c_i" type="text" id="j_username" placeholder="请输入用户名" value="">
								    </div>
			                        <div class="c_ cc_"><span class="mima-icon"></span>
			                            <input class="c_i" type="password" id="j_password" placeholder="请输入密码" value="">
								    </div>
									<div class="c_">
										<div class="cc_" data-judge="true" style="height:37px;width:125px;float:left;">
											<span class="yzmz-icon"></span>
				                            <input class="c_i" id="vdcode" type="text" name="j_captcha" placeholder="验证码" value="" style=" width:80px;">
			                            　		    　			</div>
			                     		<img src="${ctx}/security/jcaptcha.jpg" style="float:right;border:1px solid #ECECEC;border-radius:3px;width:95px;height:37px;margin:0 0 0 0;" id="captchaImg" alt="点击更新验证码" title="点击更新验证码" onclick="flashCaptcha()"/>
			                        </div>						
			                </div>
			               <button id="btn_Login" type="submit">登 录</button>
<!-- 			               <p class="c_s_" style="font-size:12px;line-height:13px;margin-top:15px;margin-left:5px;cursor:pointer;width:70px;height:13px;padding:0;margin-left:44px;"> -->
<!-- 			               		<span class="c_s" style="width:10px;height:10px;border:1px solid #106FB3;display:block;float:left;margin-right:5px;"></span><span style="height:10px;line-height:10px;display:inline-block;">记住密码</span> -->
<!-- 			               </p> -->
				</form>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <div class="logo"></div>
    <div class="footer"></div>
    
    
    <script>
    $(function(){
    	$(".content .con_right ul .con_r_right .user .cc_").click(function(){
    		if($(this).hasClass("on")){
    			$(this).removeClass("on");
    		}else{
    			for(var i=0;i<$(".content .con_right ul .con_r_right .user .cc_").length;i++)
    			$($(".content .con_right ul .con_r_right .user .cc_")[i]).removeClass("on");
    			$(".content .con_right ul .con_r_right .user .c_i").blur(function(){
    	    		for(var i=0;i<$(".content .con_right ul .con_r_right .user .cc_").length;i++)
    	    		$($(".content .con_right ul .con_r_right .user .cc_")[i]).removeClass("on");
    	    	});
    			$(this).addClass("on");
    			$(".content .con_right ul .con_r_right .user .c_i").eq($(this).index()).focus();
    			if($(this).attr("data-judge")=="true"){
    				$(".content .con_right ul .con_r_right .user .c_i").eq(2).focus();
    				$($(".content .con_right ul .con_r_right .user .cc_")[2]).addClass("on");
    			}
    		}
    	});
    	
    	$(".content .con_right ul .con_r_right .c_s_").click(function(){
    		if($(this).hasClass("on")){
    			$(this).removeClass("on");
    			$(".content .con_right ul .con_r_right .c_s").removeClass("on");
    		}else{
    			$(this).addClass("on");    			
    			$(".content .con_right ul .con_r_right .c_s").addClass("on");
    		}
    	});
    	
    	$(".main").height($(window).height());
    	$(".content .con_right").css({"margin-top":($(window).height()-$(".content .con_right").height())/2-80+"px"});

    	$(".logo").css({"top":$(window).height()*0.08+"px","left":($(window).width()-495)/2+"px"});
    	$(".footer").css({"top":$(window).height()*0.9+"px","left":($(window).width()-248)/2+"px"});
    });
    $(window).resize(function(){
    	$(".main").height($(window).height());
    	$(".content .con_right").css({"margin-top":($(window).height()-$(".content .con_right").height())/2-80+"px"});
    	
    	$(".logo").css({"top":$(window).height()*0.08+"px","left":($(window).width()-495)/2+"px"});
    	$(".footer").css({"top":$(window).height()*0.9+"px","left":($(window).width()-248)/2+"px"});
    });
    </script>
</body>
</html>